<template>
  <van-nav-bar
    title="我的"
    left-text="返回"
    left-arrow
    @click-left="$router.back()"
    fixed
    placeholder
  />
  <div class="avatar">
    <van-image
      round
      width="100px"
      height="100px"
      src="https://fastly.jsdelivr.net/npm/@vant/assets/cat.jpeg"
    />
    <span>{{ userid }}</span>
  </div>
  <van-cell-group inset>
    <van-cell title="单元格" value="内容" />
    <van-cell title="单元格" value="内容" label="描述信息" />

    <van-cell title="路由跳转" is-link to="/userInfo">
      <!-- 使用 title 插槽来自定义标题 -->
      <template #title>
        <van-icon name="setting-o" />
        <span class="custom-title">设置</span>
      </template>
    </van-cell>
  </van-cell-group>
  <br />
  <van-cell-group inset>
    <van-cell title="URL 跳转" is-link url="https://github.com" />
    <van-cell title="路由跳转" is-link to="index" />
  </van-cell-group>
  <br />
  <van-button type="primary" block @click="$router.push('/reg')">注册</van-button>
  <br />
  <van-button type="danger" block @click="logoutFn()" v-show="flag1">退出</van-button>
  <van-button type="success" block @click="logoutFn()" v-show="flag2">登录</van-button>
</template>

<script setup>
import { useRouter } from 'vue-router'
import { ref } from 'vue'
import { num } from '@/stores/huibiao'
let userid = localStorage.getItem('userid')
let router = useRouter()
let flag1 = ref()
let flag2 = ref()
function logoutFn() {
  let token = localStorage.getItem('token')

  if (token == null) {
    if (confirm('您还未登录，是否前往登录')) {
      router.push('/login')
    }
  } else {
    // flag1.value = true
    // flag2.value = false
    if (confirm('确认退出')) {
      localStorage.removeItem('token')
      localStorage.removeItem('userid')
      logFn()
      num.value = 0
    }
  }
}
function logFn() {
  let token = localStorage.getItem('token')
  if (token == null) {
    flag1.value = false
    flag2.value = true
  } else {
    flag1.value = true
    flag2.value = false
  }
}
logFn()
</script>

<style scoped>
.avatar {
  margin: auto;
  width: 342px;
  display: flex;
  align-items: center;
}
.avatar img {
  flex: 2;
}
span {
  margin-left: 20px;
  flex: 1;
}
</style>
